<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>软件园商城</title>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<!-- Custom styles for this template -->
	<link href="css/dashboard.css" rel="stylesheet" th:href="@{/css/dashboard.css}">
	<!-- Font Awesome for icons -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	<style type="text/css">
		/* 整体样式 */
		body {
			background-color: #f8f9fa;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}

		/* 表格样式 */
		.table {
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
		}

		.table th {
			background-color: #f8f9fa;
			font-weight: 600;
			color: #495057;
		}

		.table tr:hover {
			background-color: #f1f3f5;
		}

		/* 分页样式 */
		.pagination {
			justify-content: center;
			margin: 20px 0;
		}

		.pagination a {
			color: #4a6bff;
			text-decoration: none;
			padding: 8px 16px;
			margin: 0 5px;
			border: 1px solid #e0e0e0;
			border-radius: 20px;
			transition: all 0.3s ease;
		}

		.pagination a:hover {
			background-color: #f1f3f5;
			border-color: #4a6bff;
			color: #4a6bff;
		}

		.pagination a.active {
			background-color: #4a6bff;
			border-color: #4a6bff;
			color: white;
		}

		/* 表单样式 */
		.custom-search {
			margin: 20px auto;
			width: 100%;
			max-width: 600px;
		}

		.search-box {
			display: flex;
			border: 2px solid #e0e0e0;
			border-radius: 30px;
			overflow: hidden;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
		}

		.search-box:focus-within {
			box-shadow: 0 0 10px rgba(74, 107, 255, 0.3);
			border-color: #4a6bff;
		}

		.search-input {
			flex: 1;
			padding: 10px 15px;
			border: none;
			outline: none;
			font-size: 16px;
			background-color: #f8f9fa;
			transition: background-color 0.3s ease;
		}

		.search-input:focus {
			background-color: #fff;
		}

		.search-btn {
			padding: 10px 20px;
			background-color: #4a6bff;
			color: white;
			border: none;
			cursor: pointer;
			font-size: 16px;
			transition: background-color 0.3s ease;
		}

		.search-btn:hover {
			background-color: #3a5ae8;
		}

		/* 消息提示样式 */
		.message-toast {
			position: fixed;
			top: 20px;
			right: 20px;
			background: #4CAF50;
			color: white;
			padding: 15px 25px;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			z-index: 1000;
			animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
			transform: translateX(100%);
			opacity: 0;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateX(100%); }
			to { opacity: 1; transform: translateX(0); }
		}

		@keyframes fadeOut {
			from { opacity: 1; transform: translateX(0); }
			to { opacity: 0; transform: translateX(100%); }
		}

		/* 按钮样式 */
		.btn {
			border-radius: 6px;
			transition: all 0.3s ease;
		}

		.btn-primary {
			background-color: #4a6bff;
			border-color: #4a6bff;
		}

		.btn-primary:hover {
			background-color: #3a5ae8;
			border-color: #3a5ae8;
		}

		.btn-danger {
			background-color: #dc3545;
			border-color: #dc3545;
		}

		.btn-danger:hover {
			background-color: #c82333;
			border-color: #c82333;
		}

		/* 头像样式 */
		.avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			object-fit: cover;
		}

		/* 操作按钮组样式 */
		.action-buttons {
			display: flex;
			gap: 5px;
		}

		.action-btn {
			padding: 5px 10px;
			font-size: 14px;
		}
	</style>
</head>
<body>
<!-- 顶部导航 -->
<div th:replace="~{topleft::topnav}"></div>

<div class="container-fluid">
	<div class="row">
		<!-- 左边菜单 -->
		<div th:replace="~{topleft::#sidebarMenu(lurl='leftuser')}"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<!-- 操作按钮组 -->
			<div class="d-flex justify-content-between align-items-center mb-3">
				<div>
					<a class="btn btn-success btn-sm" th:href="@{/toAddUser}">
						<i class="fas fa-plus"></i> 添加用户
					</a>
				</div>
				<div class="batch-actions">
					<button class="btn btn-primary btn-sm action-btn" onclick="selectAll()">
						<i class="fas fa-check-square"></i> 全选
					</button>
					<button class="btn btn-secondary btn-sm action-btn" onclick="deselectAll()">
						<i class="fas fa-square"></i> 取消全选
					</button>
					<button class="btn btn-danger btn-sm action-btn" onclick="batchDelete()">
						<i class="fas fa-trash"></i> 批量删除
					</button>
				</div>
			</div>

			<div class="custom-search">
				<form action="#" th:action="@{/searchUser}" method="post">
					<div class="search-box">
						<input type="text" name="searchTerm" placeholder="输入编号/姓名/性别" class="search-input">
						<button type="submit" class="search-btn">
							<i class="fas fa-search"></i>
						</button>
					</div>
				</form>
			</div>

			<div class="table-responsive">
				<table class="table table-striped table-sm">
					<thead>
					<tr>
						<td class="checkbox-cell">
							<input type="checkbox" id="selectAll" class="form-check-input">
						</td>
						<th>编号</th>
						<th>头像</th>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
						<th>密码</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="user:${ulist}">
						<td class="checkbox-cell">
							<input type="checkbox" class="user-checkbox form-check-input" th:value="${user.id}">
						</td>
						<td th:text="${user.id}"></td>
						<td>
							<img th:src="${user.avatar}" class="avatar" alt="用户头像">
						</td>
						<td th:text="${user.name}"></td>
						<td th:text="${user.sex}"></td>
						<td th:text="${user.age}"></td>
						<td th:text="${user.password}"></td>
						<td class="center action-buttons">
							<a class="btn btn-success btn-sm action-btn" th:href="@{'/userShow/' + ${user.id}}" title="查看">
								<i class="fas fa-eye"></i>
							</a>
							<a class="btn btn-info btn-sm action-btn" th:href="@{'/toUpdateUser/' + ${user.id}}" title="修改">
								<i class="fas fa-edit"></i>
							</a>
							<a class="btn btn-danger btn-sm action-btn" th:href="@{'/userDel/' + ${user.id}}" onclick="return confirm('确认删除吗？')" title="删除">
								<i class="fas fa-trash"></i>
							</a>
						</td>
					</tr>
					<!-- 显示消息弹窗 -->
					<div th:if="${not #strings.isEmpty(msg)}" class="message-toast">
						<span th:text="${msg}"></span>
					</div>
					</tbody>
				</table>

				<div class="pagination">
					<!-- 首页 -->
					<a th:href="@{/getUserList(page=1, size=${pageInfo.pageSize})}">首页</a>
					<!-- 上一页 -->
					<a th:if="${pageInfo.hasPreviousPage}"
					   th:href="@{/getUserList(page=${pageInfo.prePage}, size=${pageInfo.pageSize})}">
						上一页
					</a>
					<!-- 当前页/总页数 -->
					<span th:text="'当前页：' + ${pageInfo.pageNum} + '/总页数：' + ${pageInfo.pages}"></span>
					<!-- 下一页 -->
					<a th:if="${pageInfo.hasNextPage}"
					   th:href="@{/getUserList(page=${pageInfo.nextPage}, size=${pageInfo.pageSize})}">
						下一页
					</a>
					<!-- 尾页 -->
					<a th:href="@{/getUserList(page=${pageInfo.pages}, size=${pageInfo.pageSize})}">尾页</a>
				</div>
			</div>
		</main>
	</div>
</div>

<!-- JavaScript -->
<script type="text/javascript" src="js/jquery-3.2.1.slim.min.js" th:href="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="js/popper.min.js" th:href="@{/js/popper.min.js}"></script>
<script type="text/javascript" src="js/bootstrap.min.js" th:href="@{/js/bootstrap.min.js}"></script>
<script>
	// 全选/取消全选功能
	document.getElementById('selectAll').addEventListener('change', function() {
		const checkboxes = document.querySelectorAll('.user-checkbox');
		checkboxes.forEach(checkbox => {
			checkbox.checked = this.checked;
		});
	});

	// 批量删除功能
	function batchDelete() {
		const selectedIds = [];
		const checkboxes = document.querySelectorAll('.user-checkbox:checked');

		if (checkboxes.length === 0) {
			alert('请至少选择一项');
			return;
		}

		if (!confirm(`确定要删除选中的 ${checkboxes.length} 条记录吗？`)) {
			return;
		}

		checkboxes.forEach(checkbox => {
			selectedIds.push(checkbox.value);
		});

		// 使用AJAX发送批量删除请求
		fetch('/batchDelete', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
			body: JSON.stringify({
				ids: selectedIds.map(id => parseInt(id))
			})
		})
				.then(response => response.json())
				.then(data => {
					alert(data.message || '删除成功');
					window.location.reload(); // 刷新页面
				})
				.catch(error => {
					console.error('Error:', error);
					alert('删除失败');
				});
	}

	// 全选按钮
	function selectAll() {
		const checkboxes = document.querySelectorAll('.user-checkbox');
		checkboxes.forEach(checkbox => {
			checkbox.checked = true;
		});
		document.getElementById('selectAll').checked = true;
	}

	// 取消全选按钮
	function deselectAll() {
		const checkboxes = document.querySelectorAll('.user-checkbox');
		checkboxes.forEach(checkbox => {
			checkbox.checked = false;
		});
		document.getElementById('selectAll').checked = false;
	}
</script>
</body>
</html>